<template>
	<view class="myWithdrawal">
		<view class="public-nav">
			<view class="public-nav-fixed">
				<view class="public-nav-top" style="background-color: #E3E3E3;color: #333;">
					<view class="public-nav-top-status-bar" :style="{ height: systemInfo.statusBarHeight + 'px' }">
					</view>
					<view class="public-nav-top-navbar-inner" :style="{ height: navHeight + 'px', lineHeight: navHeight + 'px' }">
						<text class="iconfont iconguanbi1" @click="returnclick"></text>
						<view>提现</view>
					</view>
				</view>
			</view>
			<view class="public-nav-placeholder"
				:style="{ height: Number(navHeight) + Number(systemInfo.statusBarHeight) + 'px' }">
			</view>
		</view>
		<view class="myWithdrawal-type" @click="show = true">
			<view class="myWithdrawal-type-left">
				到账类型
			</view>
			<view class="myWithdrawal-type-right" v-if="myWithdrawalTypeinfo == '请选择'">
				请选择
			</view>
			<view class="myWithdrawal-type-right" v-else>
				<view class="myWithdrawal-type-right-top">
					<view class="myWithdrawal-type-right-top-img">
						<image :src="myWithdrawalTypeinfo.SETTB206CA03 || '../../static/images/accountNote.png'" mode="">
							<text>{{ myWithdrawalTypeinfo.SETTB406CA02 }}（{{ myWithdrawalTypeinfo.SETTB406CA03 }}）</text>
					</view>
					<text class="iconfont iconarrow_right"></text>
				</view>
				<view class="myWithdrawal-type-right-top-text">
					收款人：<text>{{ myWithdrawalTypeinfo.SETTB406CA04 }}</text>
				</view>
			</view>
		</view>
		<view class="myWithdrawal-content">
			<view class="">
				提现金额
			</view>
			<view class="myWithdrawal-content-input">
				<text>￥</text>
				<input type="text" @input="moneyIpt" @blur="topMoneyChange" v-model="TXmoney" value="" />
			</view>
			<view class="myWithdrawal-content-YE">
				可用余额{{ yuMoney }}元 <text @click="qbtxmoney()">全部提现</text>
			</view>
			<view class="myWithdrawal-content-YE" style="border:none;">
				<text style="color:#999;">剩余免费额度</text><text style="padding-left:5rpx;color:#999;">￥<text
						style="color:red; font-size:35rpx;">{{ TXmfed }}</text></text>
			</view>
			<view class="">
				<view class="txdz-main-fle">
					<view class="">
						<text style="color:#999;">到账金额</text>
					</view>
					<view class="">
						<text>￥{{ TXdzje }}</text>
					</view>

				</view>
				<view class="txdz-main-fle">
					<text style="color:#999;">服务费</text>
					<view v-if="TXfwf > 0" class="">
						<text>￥{{ TXfwf }}</text>
					</view>
					<view class="" v-if="TXmffwf > 0">
						<text style="text-decoration:line-through; color:#999;">￥{{ TXmffwf }}</text>
						<text style="color:#f60;">本次提现免费</text>
					</view>
				</view>
				<view v-if="TXmffwf > 0" class="txdz-main-fle">

					<view class="">

					</view>
					<view class="">
						<text style="color:#999;">免费额度抵扣￥-{{ TXmffwf }}</text>

					</view>
				</view>
			</view>
			<view class="myWithdrawal-content-BZ">
				<text>备注</text>
				<input type="text" v-model="TXnote" value="" placeholder="请输入" maxlength="50" />
			</view>
			<view class="myWithdrawal-content-btn">
				<view class=""></view>
				<view class="">
					<button type="default" @click="submit">提现申请</button>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom">
			<view class="myWithdrawal-popup">
				<view class="myWithdrawal-popup-title">
					<text class="iconfont iconguanbi1" @click="show = false"></text>
					<view class="myWithdrawal-popup-title-right">
						<view class="">
							选择到账类型
						</view>
						<view class="myWithdrawal-popup-title-color">
							到账时间以平台审核完成时间为准
						</view>
					</view>
				</view>
				<scroll-view class="myWithdrawal-popup-scroll" scroll-y="true">
					<view class="myWithdrawal-popup-scroll-li" @click="myWithdrawalTypeinfo = item, show = false"
						v-for="(item, index) of myWithdrawalTypeArrList" :key="index">
						<view class="myWithdrawal-popup-scroll-li-left">
							<image :src="item.SETTB206CA03 || '../../static/images/accountNote.png'" mode=""></image>
						</view>
						<view class="myWithdrawal-popup-scroll-li-right">
							<text>{{ item.SETTB406CA02 }}（{{ item.SETTB406CA03 }}）</text>
							<view class="">
								收款人：{{ item.SETTB406CA04 }}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="myWithdrawal-popup-scroll-li" @click="AddClickType">
					<view class="myWithdrawal-popup-scroll-li-left">
						<text class="iconfont iconzhanghu1"></text>
					</view>
					<view class="myWithdrawal-popup-scroll-li-right myWithdrawal-popup-scroll-li-flex">
						<view class="">
							添加新账户提现
						</view>
						<text class="iconfont iconarrow_right"></text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="submitShow" :show-cancel-button="true" title="确认收款信息" @confirm="submitConfirm">
			<view class="slot-content">
				<view class="slot-content-li">
					<text>到账类型：</text>{{ myWithdrawalTypeinfo.SETTB406CA02 }}
				</view>
				<view class="slot-content-li">
					<text>账号：</text>{{ myWithdrawalTypeinfo.SETTB406CA03 }}
				</view>
				<view class="slot-content-li">
					<text>收款人：</text>{{ myWithdrawalTypeinfo.SETTB406CA04 }}
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			userinfo: JSON.parse(uni.getStorageSync('userinfo')),
			systemInfo: uni.getSystemInfoSync(),
			navHeight: '',
			show: false,
			TXmoney: '',
			yuMoney: 0,
			TXmoneyZD: 0,
			TXnote: '',
			TXmfed: 0,
			TXdzje: 0,
			TXfwf: 0,
			TXmffwf: 0,
			submitShow: false,
			myWithdrawalTypeArrList: [],
			myWithdrawalTypeinfo: '请选择'
		}
	},
	onShow: function () {
		this.systemInfo = uni.getSystemInfoSync()
		this.navHeight = this.systemInfo.platform == 'ios' ? 44 : 48;
		this.queryMoney()
		this.queryTXmoney()
		this.myWithdrawalTypeList()
	},

	methods: {
		returnclick() {
			uni.navigateBack({
				delta: 1
			})
		},

		submit() {
			if (this.myWithdrawalTypeinfo == '请选择') {
				uni.showToast({
					title: "请选择提现账户类型",
					duration: 5000,
					icon: 'none',
				});
				return
			}
			var money = Number(this.TXmoney)
			var moneyZD = Number(this.TXmoneyZD)
			// console.log(this.TXmoney)
			// console.log(money)
			// console.log(moneyZD)
			if (money < moneyZD) {
				uni.showToast({
					title: "提现金额不能低于最低提现额度" + moneyZD,
					duration: 5000,
					icon: 'none',
				});
				return
			}
			this.submitShow = true
		},
		submitConfirm() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			var TXmoney = Number(this.TXmoney)
			uni.request({
				url: this.baseUrl + '/orm/ormtb421/insertOrmtb421',
				method: 'POST',
				dataType: 'json',
				data: {
					"ORMTB421CA02": TXmoney, //金额
					"ORMTB421CA04": this.TXnote, //申请原因
					"ORMTB421CA06": this.userinfo.PERTB005CA03, //申请人
					"ORMTB421CA08": this.userinfo.ORMTB410ID, //申请人ID：车辆ID/客户ID
					"ORMTB421CA09": this.userinfo.ORMTB410CA00, //客户名称
					"ORMTB421CA10": this.myWithdrawalTypeinfo.SETTB406CA01, //账户类型代码
					"ORMTB421CA11": this.myWithdrawalTypeinfo.SETTB406CA02, //账户名称：支付宝/微信
					"ORMTB421CA12": this.myWithdrawalTypeinfo.SETTB406CA03, //账号
					"ORMTB421CA13": this.myWithdrawalTypeinfo.SETTB406CA04, //账号人姓名
				},
				success: (res) => {
					console.log(res);
					uni.hideLoading();
					if (res.data.code == 200) {
						this.$refs.uToast.show({
							title: '申请成功',
							type: 'default',
							icon: false
						})
						var str = JSON.stringify(res.data.data)
						uni.navigateTo({
							url: '../myWithdrawalResult/index?str=' + str
						})
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'default',
							icon: false
						})
					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: res.errMsg,
						type: 'default',
						icon: false
					})
				}
			});
		},
		moneyIpt(e) {
			// console.log(e)
			var num = this.TXmoney
			num = num.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
			num = num.replace(/^\./g, ""); //验证第一个字符是数字
			num = num.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
			num = num.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
			num = num.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
			if (num.indexOf(".") < 0 && num != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
				num = parseFloat(num);
			}
			// this.TXmoney='1'
			this.$nextTick(function () {
				if (num > this.yuMoney) {
					this.TXmoney = this.yuMoney
				} else {
					this.TXmoney = num
				}

			})
			this.mytxjefwf()
		},
		topMoneyChange() { //充值金额失去焦点数据处理
			this.TXmoney = Number(this.TXmoney)
			// var money=this.TXmoney
			// // this.TXmoney='1'
			// var index=String(money).indexOf('.')
			// if(index==-1) return this.TXmoney=money
			// var numArr=money.split('.')
			// if(numArr[1].length==0){
			// 	this.$nextTick(function(){
			// 		this.TXmoney=numArr[0]
			// 	})
			// }
			// else{
			// 	this.$nextTick(function(){
			// 		this.TXmoney=numArr[0]+'.'+numArr[1]
			// 	})
			// }
		},
		AddClickType() {
			uni.navigateTo({
				url: '../myWithdrawalTypeAdd/index'
			})
		},
		qbtxmoney() {
			this.TXmoney = this.yuMoney
			this.mytxjefwf()
		},
		mytxjefwf() {
			uni.request({
				url: this.baseUrl + '/orm/ormtb421/calc',
				method: 'POST',
				dataType: 'json',
				data: {
					ORMTB410ID: this.userinfo.ORMTB410ID, //车辆settb402id
					ORMTB421CA02: this.TXmoney,
				},
				success: (res) => {
					uni.hideLoading();
					// console.log(res);
					if (res.data.code == 200) {
						this.TXfwf = res.data.data.fwf;
						this.TXdzje = res.data.data.dzje;
						this.TXmffwf = res.data.data.mffwf
					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: res.errMsg,
						type: 'default',
						icon: false
					})
				}
			});
		},
		myWithdrawalTypeList() {
			uni.showLoading({
				title: '请求中...',
				mask: true
			});
			uni.request({
				url: this.baseUrl + '/orm/ormtb421/selectSettb406/' + this.userinfo.ORMTB410ID,
				method: 'GET',
				success: (res) => {
					uni.hideLoading();
					console.log(res);
					if (res.data.code == 200) {
						if (!res.data.data || res.data.data == null) {
							this.myWithdrawalTypeArrList = []
							return
						}
						this.myWithdrawalTypeArrList = res.data.data || []
						if (this.myWithdrawalTypeArrList.length > 0) {
							this.myWithdrawalTypeinfo = this.myWithdrawalTypeArrList[0]
						}
					} else {
						this.myWithdrawalTypeArrList = []
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'default',
							icon: false
						})
					}
					if (this.myWithdrawalTypeArrList.length == 0) {
						this.show = true
					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: res.errMsg,
						type: 'default',
						icon: false
					})
				}
			});
		},
		queryMoney() {
			uni.request({
				url: this.baseUrl + '/orm/ormtb421/selectORMTB410CA03',
				method: 'POST',
				dataType: 'json',
				data: {
					ORMTB410ID: this.userinfo.ORMTB410ID, //车辆settb402id
				},
				success: (res) => {
					uni.hideLoading();
					console.log(res);
					if (res.data.code == 200) {
						this.yuMoney = res.data.data.ORMTB410CA05 || 0
						this.TXmfed = res.data.data.ORMTB410CB20 || 0

					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: res.errMsg,
						type: 'default',
						icon: false
					})
				}
			});
		},
		// 提现最低限制
		queryTXmoney() {
			uni.request({
				url: this.baseUrl + '/orm/ormtb440/selectOrrmtb403ByCa00?ORMTB403CA00=' + '1001',
				method: 'GET',
				dataType: 'json',
				// data: {
				// 	ORMTB403CA00:'1001',//参数代码
				// },
				success: (res) => {
					console.log(res);
					if (res.data.code == 200) {
						this.TXmoneyZD = res.data.data || 0
					}
				},
				fail: (res) => {
					this.$refs.uToast.show({
						title: res.errMsg,
						type: 'default',
						icon: false
					})
				}
			});
		},
	}

}
</script>

<style scoped>
.myWithdrawal {
	min-width: 100vw;
	min-height: 100vh;
	background-color: #FFF;
}

.slot-content {
	padding: 20rpx 30rpx 20rpx 0;
	font-size: 28rpx;
	color: #333;
}

.slot-content-li {
	height: 50rpx;
	line-height: 50rpx;
}

.slot-content-li text {
	display: inline-block;
	width: 200rpx;
	text-align: right;
}

.myWithdrawal-popup-scroll-li {
	display: flex;
	padding: 30rpx 0;
	border-top: 2rpx solid #E3E3E3;

}

.myWithdrawal-popup-scroll-li-left {
	display: flex;
	align-items: center;
	padding: 0 40rpx;
}

.myWithdrawal-popup-scroll-li-left image {
	width: 40rpx;
	height: 40rpx;
}

.myWithdrawal-popup-scroll-li-right {
	flex: 1;
	font-size: 34rpx;
	color: #333;
}

.myWithdrawal-popup-scroll-li-flex {
	display: flex;
	justify-content: space-between;
	padding-right: 30rpx;
}

.myWithdrawal-popup-scroll-li-flex .iconarrow_right {
	color: #666;
	font-size: 40rpx;
}

.myWithdrawal-popup-scroll {
	max-height: 35vh;
}

.myWithdrawal-popup-title {
	display: flex;
	padding: 20rpx 30rpx 20rpx 0;
}

.myWithdrawal-popup-title .iconguanbi1 {
	font-size: 34rpx;
	color: #333;
	width: 80rpx;
	text-align: center;
}

.myWithdrawal-popup-title-right {
	flex: 1;
}

.myWithdrawal-popup-title view {
	color: #333;
	font-size: 30rpx;
	text-align: center;
}

.myWithdrawal-popup-title .myWithdrawal-popup-title-color {
	color: #999;
}

.myWithdrawal-content {
	position: relative;
	top: -20rpx;
	border-radius: 30rpx 30rpx 0 0;
	background-color: #FFF;
	padding: 60rpx 30rpx 0 30rpx;
}

.myWithdrawal-content-input {
	display: flex;
	/* border-bottom: 2rpx solid #E3E3E3; */
}

.myWithdrawal-content-input text {
	height: 100rpx;
	line-height: 100rpx;
	font-size: 40rpx;
	font-weight: 600;
}

.myWithdrawal-content-input input {
	margin-left: 10rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 40rpx;
	font-weight: 600;
	width: 80%;
}

.myWithdrawal-content-YE {
	height: 90rpx;
	line-height: 90rpx;
	font-size: 30rpx;
	color: #999;
	border-bottom: 2rpx solid #e3e3e3;
}

.myWithdrawal-content-YE text {
	font-weight: 500;
	color: #00005e;
	margin: 10rpx;
}

.myWithdrawal-content-BZ {
	display: flex;
	padding: 40rpx 0;
	font-size: 30rpx;
}

.myWithdrawal-content-BZ text {
	height: 60rpx;
	line-height: 60rpx;
}

.myWithdrawal-content-BZ input {
	height: 60rpx;
	line-height: 60rpx;
	margin-left: 30rpx;
	width: 80%;
}

.myWithdrawal-content-btn {
	display: flex;
	justify-content: space-between;
	margin-top: 200rpx;
}

.myWithdrawal-content-btn button {
	width: 300rpx;
	background-color: #1989FA;
	color: #FFF;
}

.public-nav-top-navbar-inner .iconfont {
	font-size: 26rpx;
}

.myWithdrawal-type {
	display: flex;
	padding: 60rpx 0;
	font-size: 28rpx;
	color: #333;
	background-color: #E3E3E3;
}

.myWithdrawal-type-left {
	display: flex;
	align-items: center;
	padding: 0 40rpx 0 40rpx;
}

.myWithdrawal-type-right {
	flex: 1;
	padding-right: 40rpx;
}

.myWithdrawal-type-right-top {
	display: flex;
	justify-content: space-between;
	vertical-align: top;
}

.myWithdrawal-type-right-top image {
	width: 30rpx;
	height: 30rpx;
	vertical-align: middle;
	margin-right: 10rpx;
}

.myWithdrawal-type-right-top-img text {
	vertical-align: top;
	line-height: 50rpx;
}

.myWithdrawal-type-right-top-text text {
	color: #666;
}

.myWithdrawal-type-right-top .iconarrow_right {
	line-height: 50rpx;
	color: #666;
}

.txdz-main-fle {
	display: flex;
	justify-content: space-between;
	padding-bottom: 20rpx;
}
</style>
